.switch-btn {
    margin: 0 auto;
    margin-top: 23px;
    position: relative; 
    width: 70px;
    text-align: center;
    .tips-box{
        position: relative;
        .tips-arrow{
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 6px solid #000;
            opacity: 0.8;
            position: absolute;
            top: -6px;
            left: 30px;
        }
        .tips-inner{
            padding: 5px 8px 4px 8px;
            background-color: black;
            color: white;
            width: 80px;
            text-align: center;
            border-radius: 3px;
            opacity: 0.8;
            position: absolute;
            z-index: 99;
            left: -13px;
            li{
                padding: 4px 0;
                cursor: pointer;
                font-size: (13/16)rem;
                line-height 1.15
                color: #ddd;
                &:hover{
                    background: #111;
                }
            }
        }
    }
    .icon{
        height: 32px;
        width: 32px;
        background: #cecece;
        border-radius: 100px;
        position: relative;
        overflow: hidden;
        display: inline-block;
        padding: 10px;
        transform: scale(0.6);
        cursor: pointer;
    }
    
    .icon-ctn {
        width: 34px;
        height: 34px;
        position: relative;
        overflow: hidden;
        .birdhouse {
            width: 0;
            height: 0;
            position: absolute;
            top: 0;
            left: 0;
            border-style: solid;
            border-color: transparent transparent #4d4d4d transparent;
            border-width: 0 16px 14px;
            &:after {
                content: '';
                position: absolute;
                top: 12px;
                left: -12px;
                border-style: solid;
                border-color: #4d4d4d transparent transparent transparent;
                border-width: 100px 12px;
            }
        }
        .birdhouse_holes {
            width: 12px;
            height: 12px;
            background: #ddd;
            position: absolute;
            -webkit-border-radius: 60px;
            -moz-border-radius: 60px;
            border-radius: 60px;
            left: 10px;
            top: 8px;
            &:after {
                content: '';
                position: absolute;
                width: 4px;
                height: 4px;
                background: #ccc;
                bottom: -8px;
                left: 4px;
                -webkit-border-radius: 60px;
                -moz-border-radius: 60px;
                border-radius: 60px;
            }
        }
        .ribbon {
            width: 12px;
            height: 20px;
            background: #333;
            margin: 2px 0 0 10px;
            &:after{
                content: '';
                position: absolute;
                left: 10px;
                top: 16px;
                width: 0;
                height: 0;
                border: solid #333;
                border-color: transparent #333 transparent #333;
                border-width: 6px 6px 8px 6px;
            }
        }
        .loopback_l {
            width: 10px;
            height: 5px;
            border-style: solid;
            border-width: 0px 3px 3px 3px;
            border-color: #333;
            border-radius: 0 0 50px 50px;
            position: absolute;
            top: 16px;
            left: 1px;
            &:before {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 4px;
                border-color: transparent transparent transparent #333;
                bottom: 7px;
                left: 5px;
            }
            &:after {
                content: '';
                width: 5px;
                height: 5px;
                border-style: solid;
                border-width: 3px 0 0 3px;
                border-color: #333;
                border-radius: 50px 0 0 0;
                position: absolute;
                left: -3px;
                bottom: 5px;
            }
        }
        .loopback_r {
            width: 10px;
            height: 5px;
            border-style: solid;
            border-width: 3px 3px 0 3px;
            border-color: #333;
            border-radius: 50px 50px 0 0;
            position: absolute;
            top: 8px;
            right: 2px;
            &:before {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 4px;
                border-color: transparent #333 transparent transparent;
                top: 7px;
                right: 5px;
            }
            &:after {
                content: '';
                width: 5px;
                height: 5px;
                border-style: solid;
                border-width: 0 3px 3px 0;
                border-color: #333;
                border-radius: 0 0 50px 0;
                position: absolute;
                left: 5px;
                top: 5px;
            }
        }
        .user {
            width: 12px;
            height: 14px;
            background: #333;
            border-radius: 5px 5px 0 0;
            margin-left: 10px;
            margin-top: 2px;
            &:before {
                content: '';
                width: 0px;
                height: 0px;
                position: absolute;
                top: 17px;
                left: 0px;
                border-style: solid;
                border-color: transparent transparent #333 transparent;
                border-width: 0 16px 6px 16px;
            }
            &:after {
                content: '';
                width: 8px;
                height: 5px;
                background: #333;
                position: absolute;
                margin-top: 13px;
                margin-left: -4px;
            }
        }
        .shoulder {
            width: 32px;
            height: 6px;
            background: #333;
            position: absolute;
            bottom: 6px;
        }
    }
}

#header .tagcloud a
    color #fff

.tagcloud a
    display inline-block
    text-decoration none
    font-weight normal
    font-size .75rem
    color #fff
    height 1.125rem
    line-height 1.125rem
    float left
    padding 0 5px 0 10px
    position relative
    border-radius 0 5px 5px 0
    margin 5px 9px 5px 8px
    opacity i-opacity
    font-family font-chs font-sans

    for color, i in color-list
        &.color{i}
            background color
            &::before
                border-right-color color

    &:hover
        opacity 1
        transform scale(1.06)
        background-color hover-color
        border-color hover-color
        &::before
            border-right-color hover-color
    &:before
        content " "
        width 0
        height 0
        position absolute
        top 0
        left -1.1rem
        border .5625rem solid transparent
    &:after
        content " "
        width 4px
        height 4px
        background-color #fff
        border-radius 4px
        box-shadow 0 0 0 1px rgba(0,0,0,.3)
        position absolute
        top .4375rem
        left 2px

.article-tag::before,
.article-category::before
    float left
    color #999
    font base-font-size FontAwesome
    margin-right 5px
    margin-top (1/3)rem

.article-tag::before
    content "\f02b"
    margin-left 1em

.article-category::before
    content "\f02d"

.article-pop-out
    float left
    &:before
        color #999
        content "\f08d"
        font base-font-size FontAwesome
        float left
        margin-right 5px
        margin-top (1/3)rem
    &:after
        float left
        content ""
        margin-right 20px
        margin-top 9px
